<template>
    <div class="pageMain">

        <div class="header">
            <div class="back" @click="back()">
                <van-icon name="arrow-left" size="18" />
            </div>
            <div>
                <input class="searchInput" type="text" @input="inputHandle" v-model="search_name"
                    placeholder="请输入商品名称或订单号">
            </div>
            <div class="search-tag" @click="search"><img src="../../assets/index/search1.png" alt="">
            </div>
        </div>


        <div class="content">
            <!-- 没开始搜索   搜索历史   开始-->
            <div v-if="search_status">
                <div class="title">
                    历史搜索
                    <div @click="delData()" class="del" v-if="historyList.length != 0">
                        <van-icon name="delete-o" />
                    </div>
                </div>
                <div class="warp">
                    <div class="warp-item" v-for="(history, index) in historyList" :key="index"
                        @click="toSearch(history)">
                        {{ history.search_name }}</div>
                    <div class="history-none" v-if="historyList.length == 0">暂无搜索记录</div>
                </div>
            </div>
            <!-- 没开始搜索   搜索历史   结束-->
            <div v-else class="product">
                <!-- 每单开始 -->
                <div class="goods" v-for="(item, iIndex) in mainOrderList" :key="iIndex"
                    v-if="mainOrderList.length > 0">
                    <!-- 订单号 -->
                    <div class="goods-head">
                        <div>订单编号:{{ item.orderNum }}</div>
                        <div v-if="item.orderStatus == 0">待付款</div>
                        <div v-else-if="item.orderStatus == 1">待发货</div>
                        <div v-else-if="item.orderStatus == 2">待收货</div>
                        <div v-else-if="item.orderStatus == 3">已完成</div>
                        <div v-else-if="item.orderStatus == 4">已取消</div>
                        <div v-else-if="item.orderStatus == 6">特殊处理</div>
                        <div v-else-if="item.orderStatus == 7">已退款</div>
                        <div v-else-if="item.orderStatus == 8">待使用</div>
                    </div>
                    <!-- 商品 -->
                    <div class="goods-box" v-for="(order, index) in ordersList" :key="index"
                        @click="toDetail(item.orderNum)" v-if="item.orderNum == order.order_num">
                        <img v-if="item.orderFlag == 12 || item.orderFlag == 13"
                            :src="alPath + 'vitality/product/' + order.product_pic" class="product-img">
                        <img v-else :src="alPath + 'product/product_' + order.product_id + '/' + order.product_pic"
                            class="product-img">
                        <div>{{ order.product_name }}</div>
                        <div>规格:{{ order.formart_name }}</div>
                        <div>￥<span>{{ order.formart_price.toFixed(2) }}x{{ order.product_num }}</span></div>
                    </div>
                    <!-- 共几件 -->
                    <div class="row-resver">
                        <div>共计{{ item.total_num }}件商品</div>
                        <div>合计:￥<span>{{ item.realSum }}</span></div>
                    </div>
                    <!-- 代付款 -->
                    <div class="btn-row">
                        <div class="btn ccc" v-if="item.orderStatus == 0" @tap="cancelOrder(item.orderNum)">取消订单
                        </div>
                        <div class="btn red" v-if="item.orderStatus == 0" @tap="payOrder(item.orderNum)">去支付</div>
                        <div class="btn ccc" v-if="item.orderStatus == 2" @tap="checkOrder(item.orderNum)">查看物流
                        </div>
                        <div class="btn red" v-if="item.orderStatus == 2" @tap="confirmOrder(item.orderNum)">确认收货
                        </div>
                    </div>

                </div>
            </div>
            <!-- 每单结束 -->
            <img v-if="mainOrderList.length == 0 && !search_status" class="none_order"
                src="../../assets/order/order_tip.png" alt="">
        </div>


    </div>

</template>

<script>

import { alPath } from "../../network/request";
import { toSearchOrder, updateOrder } from '../../network/order'

export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            search_name: '', //搜索框
            search_status: true, //搜索了么
            historyList: [], //搜索历史
            goodsList: [],
            shop_id: localStorage.shopId,
            user_id: localStorage.userId,
            mainOrderList: [],
            ordersList: [],


        }
    },
    mounted() {

    },
    methods: {
        toDetail: function (order_num) {
            localStorage.order_num = order_num;
            // 订单详情

            this.$router.push('/orderDetail')

        },
        toSearch: function (val) {
            this.search_name = val.search_name;
            this.getData();
        },
        onCancel: function () {
            this.search_status = true;
            this.search_name = '';
        },
        cancelOrder: function (order_num) {
            console.log(order_num);
            this.$dialog.confirm({
                title: '提示',
                message: '是否取消该订单？',
            })
                .then(function () {
                    updateOrder({
                        order_num: order_num,
                        order_status: 4,
                    }).then(res => {
                        if (res.flag) {
                            this.$toast("取消成功");
                            this.getData();
                        }
                    })
                })
                .catch(function () {
                });
        },
        payOrder: function (order_num) {
            localStorage.order_num = order_num;
            this.search_name = '';
            // 订单详情
        },
        checkOrder: function (order_num) {
            localStorage.order_num = order_num;
            this.search_name = '';
            //   查看物流

        },
        confirmOrder: function (order_num) {
            this.$dialog.confirm({
                title: '提示',
                message: '是否确认收货？',
            })
                .then(function () {
                    updateOrder({
                        order_num: order_num,
                        order_status: 3,
                    }).then(res => {
                        if (res.flag) {
                            this.$toast("确认成功");
                            this.getData();
                        }
                    })
                })
                .catch(function () {
                });

        },
        inputHandle() {
            if (this.search_name == '') {
                this.search_status = true
            }
        },
        getData: function () {

            toSearchOrder({
                shopId: this.shop_id,
                userId: this.user_id,
                search: this.search_name

            }).then(res => {
                if (res.flag) {
                    var data = res.data
                    this.search_status = false;
                    if (data.mainOrderList !== null) {
                        this.mainOrderList = data.mainOrderList;
                        this.ordersList = data.orderList;
                        for (var i = 0; i < this.mainOrderList.length; i++) {
                            this.mainOrderList[i].total_num = 0;
                            this.mainOrderList[i].realSum = 0;
                            for (var j = 0; j < this.ordersList.length; j++) {
                                if (this.mainOrderList[i].orderNum == this.ordersList[j]
                                    .order_num) {
                                    this.mainOrderList[i].total_num += this.ordersList[j].product_num;
                                    this.mainOrderList[i].realSum += this.ordersList[j].order_sum
                                }
                            }
                        }
                    } else {
                        this.mainOrderList = [];
                        this.ordersList = data.orderList;
                    }
                }
            }
            )
        },

        back: function () {
            this.$router.go(-1)
        },
        search: function () {
            if (this.search_name == '') {
                return this.$toast("请输入搜索内容");
            }
            var num = 0;
            var currentObj = {
                user_id: this.user_id,
                search_name: this.search_name,
            };
            console.log(currentObj)
            for (var i = 0; i < this.historyList.length; i++) {
                if (this.historyList[i].user_id == this.user_id && this.historyList[i].search_name ==
                    this.search_name) {
                    num++;
                    this.historyList.splice(i, 1);
                    this.historyList.unshift(currentObj);
                    break;
                }
            }

            if (num == 0) {
                this.historyList.unshift(currentObj)
            }

            console.log(this.historyList);
            localStorage.orderSearchList = JSON.stringify(this.historyList);

            this.search_status = false;
            this.getData();
        },

        delData: function () {
            this.$dialog.confirm({
                title: '提示',
                message: '确认删除历史记录',
            })
                .then(function () {
                    this.historyList = [];
                    localStorage.removeItem("orderSearchList");
                })
                .catch(function () { });
        }

    },
    created() {
        if (localStorage.orderSearchList != undefined) {
            this.historyList = JSON.parse(localStorage.orderSearchList);
            console.log(this.historyList);
        }
        if (this.search_name != '') {
            this.getData();
        }
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header {
    position: fixed;
    width: 100%;
    height: 168px;
    top: 0;
    z-index: 999;
    left: 0;
    padding-top: 80px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding-left: 30px; */
    /* padding-right: 30px; */
    border-bottom: 2px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: start;
}

.back {
    position: relative;
    top: 8px;
    left: 32px;
    /* position: absolute;
	left: 10px;
	top: 44px; */
}

.searchInput {
    position: relative;
    left: 60px;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 144% !important;
    height: 60px !important;
    border-radius: 40px !important;
    background-color: #f2f2f2 !important;
    outline: none !important;
    border: none !important;
    -webkit-border-radius: 40px !important;
    -moz-border-radius: 40px !important;
    -ms-border-radius: 40px !important;
    -o-border-radius: 40px !important;
    font-size: 28px;
    color: #333;

    padding: 0 24px;
}

.search-tag {
    position: absolute;
    right: 20px;
    top: 108px;
}

.search-tag img {
    width: 36px;
}

.van-search__content {
    background-color: #f2f2f2 !important;
    border-radius: 40px !important;
    overflow: hidden !important;
}

.van-field__left-icon {
    display: none;
}

.header input::-webkit-input-placeholder,
.header textarea::-webkit-input-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.header input:-moz-placeholder,
.header textarea:-moz-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.header input::-moz-placeholder,
.header textarea::-moz-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.header input:-ms-input-placeholder,
.header textarea:-ms-input-placeholder {
    color: #999 !important;
    font-size: 28px;
}


.content {
    position: relative;
    padding: 168px 24px 24px 24px;
    height: calc(100vh - 168px);
    background-color: #f2f2f2;
    overflow: scroll;
}


.title {
    font-size: 30px;
    line-height: 32px;
    font-weight: bold;
    padding: 24px 0;
    position: relative;
}

.warp {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.warp-item {
    font-size: 24px;
    line-height: 24px;
    padding: 8px 20px;
    text-align: center;
    border-radius: 24px;
    background-color: #dcdcdc;
    color: #606060;
    margin-right: 16px;
    margin-bottom: 16px;
}

.del {
    position: absolute;
    right: 0;
    bottom: 20px;
}

.history-none {
    line-height: 120px;
    text-align: center;
    width: 100%;
    color: #999;
}

.goods {
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 6px #dcdcdc;
    margin-top: 24px;
}

.goods-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.goods-head>div:nth-child(1) {
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
}

.goods-head>div:nth-child(2) {
    font-size: 24px;
    line-height: 24px;
    color: #ff3b14;
}

.goods-box {
    position: relative;
    padding: 12px 0 12px 204px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.goods-box img {
    position: absolute;
    left: 0;
    width: 180px;
    height: 180px;
    border-radius: 16px;
}

.goods-box div:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 30px;
    line-height: 40px;
}

.goods-box div:nth-child(3) {
    font-size: 24px;
    line-height: 24px;
    color: #999;
    margin-bottom: 36px;
}

.goods-box div:nth-child(4) {
    font-size: 24px;
    line-height: 24px;
}

.goods-box div span:nth-child(1) {
    font-size: 30px;
}

.goods-box div span:nth-child(2) {
    color: #999;
    padding-left: 48px;
}

.row-resver {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    width: 100%;
    font-size: 24px;
    color: #333;
    margin-bottom: 36px;
    margin-top: 24px;
}

.row-resver>div {
    margin-left: 24px;
}

.row-resver>div span {
    font-size: 30px;
}

.btn-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.btn {
    width: 144px;
    height: 52px;
    line-height: 52px;
    font-size: 24px;
    text-align: center;
    margin-left: 16px;
    border-radius: 28px;
}

.ccc {
    color: #666;
    background-color: #dcdcdc;
}

.red {
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    color: #FFFFFF;
}

.none_order {
    width: 344px;
    position: relative;
    left: 50%;
    margin-left: -172px;
    margin-top: 100px;
}

.pageMain {
    background: #f2f2f2;
}
</style>